<template>
	<view class="container-tab">
		<view class="class_options">
			<tab-bar :current="current" :values="items" @clickItem="onClickItem"></tab-bar>
		</view>

		<view class="content" v-if="current == 0">
			<template v-if="courseList.length">
				<view v-for="(item,index) in courseList" :key="item.onlineCourse.originCourseId" class="class_cont"
					@tap="goDetail(item)">
					<!-- 线下课 -->
					<view class="class_cont_inner" v-if="item.type === 'COURSE'">
						<view class="cont_img">
							<image class="img" :src="item.cover" mode=""></image>
							<view class="status"><text class="type">线下课</text></view>
						</view>
						<view class="cont_detail">
							<view class="detail_1">
								<text class="name">{{item.name}}</text>
							</view>
							<view class="detail_2">
								<text class="nodes">{{item.courseNodes}}节</text>
								<text class="tags" v-for="label in item.labelList" :key="label">{{label}}</text>
							</view>
							<view class="detail_3">
								<rich-text class="desc" :nodes="item.introduction"></rich-text>
							</view>
						</view>
					</view>
					<!-- 线上课 -->
					<view class="class_cont_inner" v-else>
						<view class="cont_img">
							<image class="img" :src="item.onlineCourse.cover" mode=""></image>
							<view class="line_status"><text class="type">线上课</text></view>
						</view>
						<view class="cont_detail">
							<view class="detail_1">
								<text>{{item.onlineCourse.courseName}}</text>
							</view>
							<view class="line_detail_2">
								<text class="progress">已学到{{item.onlineCourse && item.onlineCourse.learningProgress ? (item.onlineCourse.learningProgress * 100).toFixed(2) : 0}}%</text>
							</view>
							<view class="line_detail_3">
								<image class="cover" src="../../../static/image/onlineschool/playicon.png" mode=""></image>
								<text class="desc">上次学到：课时{{item.onlineCourse.currentEpisodeNumber || ''}} {{item.onlineCourse.currentEpisodeName || ''}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<view v-else class="no_data">
				<image class="processing-icon" src="../../../static/image/user/processing.png"></image>
				<view class="processing-text">您还没有报名课程，赶紧儿去看看吧~</view>
				<button class="processing-btn logout-btn" @tap="goClassHandle">去看看幸福学堂</button>
			</view>
		</view>

		<view v-else class="team content">
			<view class="team_cont_a">
				<view class="team_a_1">
					<text>我的签到二维码</text>
				</view>
				<view @tap="clickQRCode" class="team_a_2">
					<image src="../../../static/image/activity/icon_6.png" mode=""></image>
				</view>
			</view>
			<template v-if="classList.length">
				<view v-for="item in classList" :key="item.classInfo.id" class="team_cont_b">
					<view class="bg_filter"></view>
					<view class="team_b_1">
						<text class="name">{{item.classInfo.name}}</text>
						<block v-if="item.classStatus !== 'END_CLASS'">
							<text
								:class="item.classStatus == 'IN_CLASS' ? 'status_des' :'status_undes'">{{formatClassType(item.classStatus)}}</text>
						</block>
						<image v-else class="img" src="../../../static/image/activity/icon_12.png" mode=""></image>
					</view>
					<view class="team_b_2">
						<text
							class="text">班级人数:{{item.classInfo.currentNumber || 0}}/{{item.classInfo.fullNumber || 0}}</text>
						<text class="text room">上课教室:{{item.classInfo.classroom || ''}}教室</text>
						<!-- <image class="icon_room" src="../../../static/image/activity/icon_7.png" mode=""></image> -->
						<text
							class="text nodes">课程节数:{{item.classInfo.currentClassNodeNumber || 0}}/{{item.classInfo.totalClassNodeNumber || 0}}</text>
					</view>
					<view class="team_b_3" v-if="item.classInfo.nextClassTime">
						<text class="nodes">下节课: 课时{{ item.classInfo.currentClassNodeNumber + 1}}  {{item.classInfo.nextClassTime.date || ''}} {{showtime(item.classInfo.nextClassTime.startDateTime)}}</text>
						<text class="schedule"
							@click="goSchedule(item.classInfo.id,item.classInfo.nextClassTime.date)">查看课程表</text>
					</view>
					<view class="team_b_4">
						<text class="wx_num">老师微信号：{{item.classInfo.teacherWechat || ''}}</text>
						<image class="wx_icon" @tap="copyHandle(item.classInfo.teacherWechat)"
							src="../../../static/image/activity/icon_9.png" mode=""></image>
					</view>
				</view>
			</template>
			<view v-else class="no_data">
				<image class="processing-icon" src="../../../static/image/user/processing.png"></image>
				<view class="processing-text">您还没有报名哦~报名后才有班级信息~</view>
				<button class="processing-btn logout-btn" @tap="goClassHandle">去看看幸福学堂</button>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<qr-modal :visible="visible" @close="closeModal" :signQrCode="signQrCode"></qr-modal>
	</view>
</template>

<script>
	import { myCousreList,myClassList,personalCenter } from '@/http/api.js'
	export default {
		data() {
			return {
				current: 0, // 现在tab页
				items: [`我的课程`, '我的班级'], // tab列表
				current: 0,
				courseList: [], //我的课程
				classList: [], //我的班级
				signQrCode: '', // 签到二维码
				visible: false, // 签到二维码弹窗
				courseInfo: {
					pageNumber: 1,
					pageSize: 10,
					isLoadOver: false
				},
				classInfo: {
					pageNumber: 1,
					pageSize: 10,
					isLoadOver: false
				}
			}
		},
		methods: {
			// 点击tab事件
			onClickItem(e) {
				this.current = e.currentIndex
				const info = [this.courseInfo, this.classInfo][this.current]
				if (info.isLoadOver) return
				this.getDataList()
			},
			goDetail(item) {
				if(item.type === 'COURSE'){
					this.goPage('/pages/user/order/detail',{id: item.registrationId})
				}else{
					this.toAutorize()
					this.goPage('/pages/onlineschool/videoplay/index',{nodeId: item.onlineCourse.nodeId,newsId: item.onlineCourse.newsId})
				}
					
			},
			goSchedule(id, date) {
				uni.navigateTo({
					url: `/pages/activity/schedule/schedule?classId=${id}&date=${date}`
				})
			},
			goClassHandle() {
				uni.navigateTo({
					url: '/pages/school/index/index'
				})
			},
			formatClassType(type) {
				switch (type) {
					case 'NOT_CLASS':
						return '未开班'
						break;
					case 'IN_CLASS':
						return '进行中'
						break;
					case 'END_CLASS':
						return '已结课'
						break;
				}
			},
			getDataList() {
				uni.showLoading({
					title: "加载中"
				})
				const url = [myCousreList, myClassList][this.current]
				let info = [this.courseInfo, this.classInfo][this.current]

				this.$request({
					url: url,
					data: {
						current: info.pageNumber,
						size: info.pageSize
					}
				}).then(res => {
					uni.hideLoading()

					if (info.pageSize * info.pageNumber >= res.total) {
						info.isLoadOver = true
					}
					this.current ?
						this.classList.splice(info.pageSize * info.pageNumber, info.pageSize, ...res.records) :
						this.courseList.splice(info.pageSize * info.pageNumber, info.pageSize, ...res.records)
				}).catch(err => {
					uni.hideLoading()
					info.isLoadOver = false
				})
			},
			// 加载更多
			loadMore() {
				console.log('底部加载')
				const info = [this.courseInfo, this.classInfo][this.current]
				if (info.isLoadOver) return
				info.pageNumber++
				this.getDataList()
			},
			// 复制微信
			copyHandle(data) {
				uni.setClipboardData({
					data: data || '',
					success: () => {
				  uni.showToast({
							title: '复制成功~',
							icon: 'none'
						})
					}
				});
			},
			// 获取二维码
			getUserInfo() {
				this.$request({
					url: personalCenter
				}).then((res) => {
					this.signQrCode = res.signQrCode // 签到二维码
				})
			},
			// 点击二维码
			clickQRCode() {
				// 弹出弹窗
				this.visible = true
			},
			// 关闭弹窗
			closeModal() {
				this.visible = false
			},
			showtime(obj){
				let now = new Date(obj);
				let h = now.getHours();
				let m = now.getMinutes();
				let timeValue = ((h > 12) ? "下午" : "上午" ) + ((h > 12) ? h -12 :h) + ':'+((m < 10 ? "0" :"")) + m;
				return timeValue;
			}
		},
	}
</script>

<style lang="scss">
	@import "./myClass.scss";
</style>
